<script setup>
import { ref } from "vue";
import Dialog from "./Dialog.vue";

const props = defineProps(["visible", "data"]);
const emits = defineEmits(["close"]);
</script>

<template>
  <Dialog
    :visible="props.visible"
    :title="props.title"
    @close="
      () => {
        emits('close');
      }
    "
  >
    <div class="gxp_box2">
      <div class="gxp_box2_c">
        <div class="box">
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in props.data"
              :key="index"
              :color="index === 0 ? '#1DC142' : '#E8E9EC'"
              placement="top"
            >
              <div class="box_c1">
                <div class="box_c1_v">{{ item.noticeTitle }}</div>
                <div class="box_c1_t">{{ item.createTime }}</div>
              </div>

              <el-divider />
              <div
                v-for="(content, index1) in item.noticeContent"
                :key="index1"
                class="box_c2"
              >
                {{ content }}
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
  </Dialog>
</template>

<style lang="less" scoped>
.gxp_box2 {
  width: 100%;
  height: 100%;
  display: flex;
  .gxp_box2_c {
    width: 100%;
    height: 100%;
    padding: 0.625rem;
    .gxp_box2_c_c {
      width: 100%;
      height: 99%;
      overflow: auto;
      scrollbar-width: none;
      border: 1px red solid;
    }
  }
}
.box {
  box-sizing: border-box;
  width: 100%;
  padding: 0.9375rem;
  // margin-bottom: .25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .box_c1 {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 40px;
    // width: 50%;
    // height: 40px;
    .box_c1_v {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 16px;
      color: #ffffff;
      margin-right: 30px;
    }

    .box_c1_t {
      font-family: PingFang SC, PingFang SC;
      font-size: 0.8125rem;
      color: #c9e9f8;
      font-size: 14px;
    }
  }

  .box_c2 {
    font-family: "Alibaba PuHuiTi 2.0-55 Regular";
    font-size: 14px;
    height: 20px;
    color: #c9e9f8;
    display: flex;
    align-items: center;
  }
}
.size16 {
  font-size: 1rem;
}
.size20 {
  font-size: 1.25rem;
}

.color12 {
  color: #71f1ea;
}
.color13 {
  color: #c9e9f8;
}
.color14 {
  color: #ffffff;
}

.font_family_num {
  font-family: Helvetica-Bold !important;
  font-weight: bold;
}

.el-divider--horizontal {
  margin: 0.25rem 0 0.5rem;
}

::v-deep .el-timeline-item__wrapper {
  padding-left: 1.125rem;
  top: -0.875rem;
}

::v-deep .el-timeline-item__timestamp.is-top {
  margin-bottom: 0px;
  padding-top: 0px;
}
</style>
